<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游首页</title>
    <!-- css引入 -->
    <link rel="stylesheet" href="less/dist/style.css">
    <link rel="stylesheet" href="less/dist/tarvel.css">
    <link rel="stylesheet" href="less/dist/swiper.min.css">
    <!-- js插件引入 -->
    <script src="js/swiper.min.js"></script>
    <script src="js/flexible.js"></script>
    <script src="js/iscroll.min.js"></script>
    <script src="js/zepto.js"></script>
</head>

<body>
    <!-- 旅游首页头部 -->
    <header>
        <div class="wrap">
            <!-- 旅游首页返回按钮 -->

            <a href="index.html"></a>

            <!-- 旅游首页搜索栏 -->
            <div id="search-bar">
                <span id="location-img"></span>
                <a id="search-bar-position" href="javascript:void(0)">北京</a>
                <span id="search-img"></span>
                <a id="search-bar-cearch" href="javascript:void(0)">目的地/关键词</a>
            </div>
        </div>
    </header>
    <!-- 旅游首页内容 -->
    <main>
        <!-- 旅游首页内容轮播图 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/img/travel-banner01.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/img/travel-banner02.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/img/travel-banner03.jpg" alt=""></div>
                <div class="swiper-slide"><img src="images/img/travel-banner04.jpg" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!-- 旅游首页内容导航 -->
        <div class="main-nav">
            <ul>
                <li>
                    <a href="travelList.html">
                        <img src="images/icon/tarvel_main_01.png">
                        出境游
                    </a>
                </li>
                <li>
                    <a href="travelList.html">
                        <img src="images/icon/tarvel_main_02.png">
                        国内游
                    </a>
                </li>
                <li>
                    <a href="travelList.html">
                        <img src="images/icon/tarvel_main_03.png">
                        周边游
                    </a>
                </li>
                <li>
                    <a href="travelList.html">
                        <img src="images/icon/tarvel_main_04.png">
                        当地游
                    </a>
                </li>
            </ul>
        </div>
        <!-- 旅游首页内容推荐商品 -->
        <div class="main-hot-shop">
            <ul>
                <li>
                    <img src="images/img/travel-show_01.jpg" alt="">
                    <span class="main-hot-shop-icon"></span>
                </li>
                <li>
                    <img src="images/img/travel-show_02.jpg" alt="">
                    <span class="main-hot-shop-icon"></span>
                </li>
                <li>
                    <img src="images/img/travel-show_03.jpg" alt="">
                    <span class="main-hot-shop-icon"></span>
                </li>
                <li>
                    <img src="images/img/travel-show_04.jpg" alt="">
                    <span class="main-hot-shop-icon"></span>
                </li>
            </ul>
        </div>
        <!-- 旅游首页内容出境游 -->
        <div class="main-outbound-travel">
            <!-- 出境游标题 -->
            <div class="main-outbound-travel-title">
                <img src="images/icon/tarvel_main_05.png" alt="">
                <a>出境游</a>
                <img src="images/img/travel-look0401_01.png" alt="">
            </div>
            <!-- 出境游内容 -->
            <div class="main-outbound-travel-content">
                <ul>
                    <li>
                        <a href="travelDetail.html">
                            <img src="images/img/travel-look0401_02.jpg" alt="">
                        </a>
                    </li>
                    <li><a href="travelDetail.html">曼谷+芭提雅6日5晚自由行（4钻）</a></li>
                    <li>
                        <a>席位充足</a>
                        <a>
                            <span class="money">¥</span>
                            <span class="num">3060</span>
                            <span class="string">起</span>
                        </a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="travelDetail.html">
                            <img src="images/img/travel-look0401_03.jpg" alt="">
                        </a>
                    </li>
                    <li><a href="travelDetail.html">美国东西海岸+夏威夷+波士顿+纽约+华盛顿+拉...</a></li>
                    <li>
                        <a>席位充足</a>
                        <a>
                            <span class="money">¥</span>
                            <span class="num">9099</span>
                            <span class="string">起</span>
                        </a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="travelDetail.html">
                            <img src="images/img/travel-look0401_04.jpg" alt="">
                        </a>
                    </li>
                    <li><a href="travelDetail.html">日本东京+大阪7日6晚自由行【美食·购物】</a></li>
                    <li>
                        <a>席位充足</a>
                        <a>
                            <span class="money">¥</span>
                            <span class="num">5353</span>
                            <span class="string">起</span>
                        </a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="travelDetail.html">
                            <img src="images/img/travel-look0401_05.jpg" alt="">
                        </a>
                    </li>
                    <li><a href="travelDetail.html">意大利+梵蒂冈+瑞士+法国+维罗纳13日跟团游...</a></li>
                    <li>
                        <a>席位充足</a>
                        <a>
                            <span class="money">¥</span>
                            <span class="num">13999</span>
                            <span class="string">起</span>
                        </a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="travelDetail.html">
                            <img src="images/img/travel-look0401_06.jpg" alt="">
                        </a>
                    </li>
                    <li><a href="travelDetail.html">普吉岛6日5晚自由行·DIY自由定制，酒店任选海...</a></li>
                    <li>
                        <a>席位充足</a>
                        <a>
                            <span class="money">¥</span>
                            <span class="num">1999</span>
                            <span class="string">起</span>
                        </a>
                    </li>
                </ul>
                <ul>
                    <li>
                        <a href="travelDetail.html">
                            <img src="images/img/travel-look0401_07.jpg" alt="">
                        </a>
                    </li>
                    <li><a href="travelDetail.html">澳大利亚悉尼+黄金海岸+墨尔本自由行·11天9...</a></li>
                    <li>
                        <a>席位充足</a>
                        <a>
                            <span class="money">¥</span>
                            <span class="num">1999</span>
                            <span class="string">起</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </main>
    <!-- 旅游首页底部分类 -->
    <footer>
        <ul>
            <li>
                <img src="images/icon/luggage_01.png">
                <a>旅游首页</a>
            </li>
            <li>
                <img src="images/icon/footer_0322_06.png">

                <a href="search.html">目的地</a>
            </li>
            <li>
                <img src="images/icon/footer_0322_07.png">
                <a href="history.html">浏览历史</a>
            </li>
            <li>
                <img src="images/icon/footer_0322_08.png">
                <a href="myinfo.html">个人</a>

            </li>
        </ul>
    </footer>
    <!-- 自制js引入 -->
    <script src="js/tarvel.js"></script>
</body>

</html>